<!-- subpkg_medicine/payment/payment.vue -->
<script lang="ts" setup>
  import { goOrderPayAPI } from '@/api/consult'
  import { createOrderAPI, getAddressAPI, preOrderAPI } from '@/api/order'
  import type { Address, preOrderParams } from '@/type/order'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const addressInfo = ref({} as Address)
  onLoad(async () => {
    const res = await getAddressAPI()
    addressInfo.value = res[0]
  })

  const perOrderInfo = ref({} as preOrderParams)
  let id = ''
  onLoad(async (params) => {
    if (params && params.id) {
      id = params.id
      console.log('params.id  ----->  ', params.id)
      const res = await preOrderAPI(params.id)
      perOrderInfo.value = res
    }
  })
  //
  const isShow = ref(false)
  //
  let orderId = ''
  const onSelectPay = async () => {
    const res = await createOrderAPI(id, addressInfo.value.id)
    console.log('res id  ----->  ', res)
    orderId = res.id
    isShow.value = true
  }
  // 支付
  const onPay = async (activeIndex: number) => {
    if (activeIndex === 0) {
      uni.showToast({ title: '微信支付' })
      return
    }
    const res = await goOrderPayAPI({
      orderId,
      paymentMethod: activeIndex + '',
      payCallback: `http://localhost:5173/#/subpkg_medicine/pay_result/pay_result`,
    })
    window.location.href = res.payUrl
  }
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-shippment">
          <view class="region">
            <uni-icons size="16" color="#FF7702" type="location-filled" />
            {{ addressInfo.city }}{{ addressInfo.county }}
          </view>
          <view class="detail">{{ addressInfo.addressDetail }}</view>
          <view class="receiver">{{ addressInfo.receiver }} {{ addressInfo.province }}</view>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view class="medicine-list-item" v-for="item in perOrderInfo.medicines" :key="item.id">
          <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">{{ item.name }}</text>
            <text class="unit symbol">{{ item.specs }}</text>
            <text class="price">¥{{ item.amount }}</text>
          </view>
          <view class="quantity">x{{ item.quantity }}</view>
          <view class="guide">用法用量：{{ item.usageDosag }}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="`¥${perOrderInfo.payment}`" />
          <uni-list-item title="运费" :right-text="`¥${perOrderInfo.expressFee}`" />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${perOrderInfo.couponDeduction}`"
          />
          <uni-list-item title="实付款" :right-text="`¥${perOrderInfo.actualPayment}`" />
        </uni-list>
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <view class="total-amount">
          需付款: <text class="number">¥{{ perOrderInfo.actualPayment }}</text>
        </view>
        <view class="buttons">
          <button class="uni-button" @click="onSelectPay">立即支付</button>
          <custom-payment
            :amcount="perOrderInfo.actualPayment"
            :show="isShow"
            @on-cancel="isShow = false"
            @on-confim="onPay"
          />
        </view>
      </view>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './payment.scss';
</style>
